<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
	<div id="root">
		<child content="Dell"></child>
		<child content="Lee"></child>
	</div>
		<script>
		// 给每一个Vue实例挂载一个vue属性，这样每个Vue实例都有一个bus属性
		Vue.prototype.bus=new Vue()


		Vue.component('child',{
			data:function(){
				return{
					selfContent:this.content
				}
			},
			props:{
				content:String
			},
			template:'<div @click="handleClick">{{selfContent}}</div>',
			methods:{
				// 向外触发
				handleClick:function(){
					// this.bus对应一个vue实例
					this.bus.$emit('change',this.selfContent)
					// alert(this.content)
				}
			},
			// 监听
			mounted:function(){
				var that=this;
				this.bus.$on('change',function(msg){
					that.selfContent=msg
				})
			}
		})
		var vm=new Vue({
			el:'#root'
		})
	</script>
</body>
</html>